<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="2">
        <div class="left">
          <el-tag effect="dark" size="medium">输入句子</el-tag>
          <!-- <span>输入句子</span> -->
          <el-input v-model="sentence" type="textarea"></el-input>
        </div>
        <el-button type="danger" class="sub" @click="submit">确认提交</el-button>
      </el-col>
      <el-col :span="10">
        <span class="tit">识别结果</span>
        <div class="result">
          <div v-for="(item,index) in result" :key="index" class="all">
            <span>{{item.words}}</span>
            <span class="fir">{{item.flag}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: [
        {
          words: '是否存在否定词:',
          flag: ''
        },
        {
          words: '否定词个数为:',
          flag: ''
        },
        {
          words: '否定词包括:',
          flag: ''
        }
      ],
      sentence: ''
    }
  },
  methods: {
    submit() {
      this.result[0].flag = '是'
      this.result[1].flag = '2'
      this.result[2].flag = '没有、不'
    }
  }
}
</script>

<style lang="less" scoped>
.fir {
  color: black !important;
}

.sub {
  margin-top: 35px;
  margin-left: 180px;
}

.tit {
  color: #30b42f;
  font-weight: 1000;
  font-size: 30px;
  margin-left: 125px;
}

.left {
  margin-top: 60px;
  display: flex;
  .el-tag {
    height: 50px;
    line-height: 45px;
    background: #1C4FAA;
    width: 100px;
    text-align: center;
  }
  /deep/ .el-textarea__inner {
    background-color: #C2CFE7;
    height: 50px;
  }
  // span {
  //   white-space: nowrap;
  //   margin-top: 9px;
  //   margin-right: 15px;
  // }
}

.result {
  background: #e8f4e8;
  height: 473px;
  margin-top: 20px;
  span {
    font-size: 16px;
    color: #30b42f;
    font-weight: 700;
    letter-spacing: 1px;
  }
  padding-top: 20px;
}

.all {
  margin: 0px 0px 20px 30px;
}
</style>